<script setup>
import { ref, toRefs, onMounted } from 'vue'
import { postAddgrouping } from '@/api'
import { number } from 'echarts'
import { postReplyGetgrouping,postReplyUpdgrouping } from '@/api'
const props = defineProps({
	dialogGroupVisible: Boolean,
	default: false,
	width: String,
	id:Boolean
})
// if(props.id){
// 	postReplyGetgrouping({id:props.id}).then(res=>{

// 	})
// }
const emits = defineEmits(['changeGroupVisible'])
const from = ref({
	name: props.id.id? props.id.grouping_name : '',
	childrenGroup: props.id.id?props.id.son_grouping :[],
	scope: 0
})
const addChildGroup = () => {
	from.value.childrenGroup.push({
		// id: from.value.childrenGroup.length + 1,
		grouping_name: ''
	})
}
// 子分组上移
const popUp = (index) => {
	if (index != 0) {
		from.value.childrenGroup[index] = from.value.childrenGroup.splice(index - 1, 1, from.value.childrenGroup[index])[0]
	}
}
//子分组下移
const popDown = (index) => {
	if (index != from.value.childrenGroup.length - 1) {
		from.value.childrenGroup[index] = from.value.childrenGroup.splice(index + 1, 1, from.value.childrenGroup[index])[0]
	}
}
//删除子分组
const removeChildGroup = (id) => {
	if(props.id.id){
		del_grouping.value.push(id)
	}
	from.value.childrenGroup = from.value.childrenGroup.filter((item) => {
		return item.id != id
	})
}
const del_grouping=ref([])
onMounted(() => {
	if(props.id.id){
		title.value='修改分组'
	}else{
		title.value='添加分组'
	}
})
const formRef = ref()
const submitForm = (formEl) => {
	console.log(from)
	var data = []
	if(props.id.id){
		
		// for(var i =0;i<from.value.childrenGroup.length;i++){
		// 	data.push(from.value.childrenGroup[i].grouping_name)
		// }
		postReplyUpdgrouping({id:props.id.id,grouping_name:from.value.name,add_groupimg:from.value.childrenGroup,del_grouping:del_grouping.value}).then(res=>{
			emits('changeGroupVisible', false)
		})
	}else{
		
		for(var i =0;i<from.value.childrenGroup.length;i++){
			data.push(from.value.childrenGroup[i].grouping_name)
		}
		postAddgrouping({grouping_name:from.value.name,son_grouping:data}).then(res=>{
			emits('changeGroupVisible', false)
		})
	}
	
	
}

const resetForm = (formEl) => {
	if (!formEl) return
	formEl.resetFields()
	from.value.childrenGroup = []
	emits('changeGroupVisible', false)
}
const title = ref('添加分组')
</script>
<template>
	<el-dialog
		:width="props.width"
		:close-on-click-modal="false"
		:center="true"
		v-model="props.dialogGroupVisible"
		destroy-on-close
		:title="title"
		@close="emits('changeGroupVisible', false)"
	>
		<div class="groupModel">
			<div class="blue-tips">
				<span class="icon-wrap"
					><i aria-label="icon: bell" class="anticon anticon-bell icon"
						><svg
							viewBox="64 64 896 896"
							focusable="false"
							class=""
							data-icon="bell"
							width="1em"
							height="1em"
							fill="currentColor"
							aria-hidden="true"
						>
							<path
								d="M816 768h-24V428c0-141.1-104.3-257.8-240-277.2V112c0-22.1-17.9-40-40-40s-40 17.9-40 40v38.8C336.3 170.2 232 286.9 232 428v340h-24c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h216c0 61.8 50.2 112 112 112s112-50.2 112-112h216c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM512 888c-26.5 0-48-21.5-48-48h96c0 26.5-21.5 48-48 48z"
							></path></svg></i
				></span>
				新增可见范围设置，管理员可根据不同部门选择展示不同话术，部门管理员可创建部门可见的话术
			</div>
			<el-form ref="formRef" :model="from" label-width="110px" class="demo-ruleForm">
				<el-form-item label="分组名称：">
					<el-input
						maxlength="6"
						show-word-limit
						style="width: 67%; background-color: #fbfbfb"
						v-model="from.name"
						placeholder="请输入分组名称"
					/>
				</el-form-item>
				<el-form-item style="align-items: center" label="设置子分组：" v-if="!props.id.id || props.id.son_grouping">
					<div class="child-group-panel">
						<div class="add-group-input">
							<div class="child-input" v-for="(item, index) in from.childrenGroup" :key="item.id">
								<el-input
									maxlength="6"
									show-word-limit
									style="width: 68%"
									v-model="item.grouping_name"
									placeholder="请输入子分组名称"
								/>
								<el-space class="btn-group" :size="25" wrap>
									<el-icon
										@click="popUp(index)"
										:class="from.childrenGroup.length > 1 ? (index === 0 ? 'no-select' : 'click-icon') : 'no-select'"
										><Top
									/></el-icon>
									<el-icon
										@click="popDown(index)"
										:class="
											from.childrenGroup.length > 1
												? index === from.childrenGroup.length - 1
													? 'no-select'
													: 'click-icon'
												: 'no-select'
										"
										><Bottom
									/></el-icon>
									<el-icon class="click-icon" @click="removeChildGroup(item.id,index)"><Remove /></el-icon>
								</el-space>
							</div>
						</div>
						<div class="add-group-btn" @click="addChildGroup">
							<el-icon class="add-icon"><CirclePlus /></el-icon>
							添加子分组
						</div>
					</div>
				</el-form-item>
				<!-- <el-form-item style="align-items: center" label="设置可见范围：">
					<el-radio-group v-model="from.scope">
						<el-radio :label="0">全部员工</el-radio>
						<el-radio :label="1">部门可见</el-radio>
					</el-radio-group>
				</el-form-item> -->
				<div class="footer-btn">
					<el-button class="btn-larger" @click="resetForm(formRef)">取消</el-button>
					<el-button class="btn-larger" type="primary" @click="submitForm(formRef)" v-if="props.id.id">修改</el-button>
					<el-button class="btn-larger" type="primary" @click="submitForm(formRef)" v-else>确定</el-button>
					
				</div>
			</el-form>
		</div>
	</el-dialog>
</template>
<style lang="scss" scoped>
.groupModel {
	width: 100%;
	// :deep(.el-input__wrapper) {
	// 	background-color: #fbfbfb;
	// }
	.btn-larger {
		width: 74px;
	}
	.blue-tips {
		margin-top: -20px;
		padding: 8px 12px;
		background: #effaff;
		font-size: 13px;
		color: rgba(0, 0, 0, 0.65);
		line-height: 18px;
		margin-bottom: 24px;
		.icon-wrap {
			margin-right: 6px;
			font-size: 12px;
			color: #1890ff;
		}
	}
	.child-group-panel {
		flex: 1;
		padding: 16px 16px 18px 14px;
		background: #fbfbfb;
		border: 1px solid #f2f2f2;
		.add-group-input {
			.child-input {
				display: flex;
				margin-bottom: 12px;
				.btn-group {
					padding-left: 11px;
					.click-icon {
						font-size: 16px;
						cursor: pointer;
					}
					.no-select {
						font-size: 16px;
						color: #aeaeae;
					}
				}
			}
		}
		.add-group-btn {
			display: flex;
			align-items: center;
			color: #1890ff;
			cursor: pointer;
			.add-icon {
				font-size: 15px;
				margin-right: 5px;
			}
		}
	}
	.footer-btn {
		display: flex;
		width: 100%;
		justify-content: flex-end;
	}
}
</style>
